{% extends "base.html" %}
{% block content %}

    <style>
    #sousuo{
        height: 500px;
    }
        body {
            align-items: center;
            background: linear-gradient(135deg, #ffafbd, #ffc3a0);
            font-family: Arial, sans-serif;
        }

        .container1 {
            width: 80%;
            max-width: 600px;
            padding: 20px;
            margin: auto;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(3px);
            text-align: center;
            position: relative;
            z-index: 1;
        }

        h1 {
            font-size: 3rem;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            line-height: 1.2;
            margin: 0;
        }

        .letter {
            position: relative;
            display: inline-block;
            animation: changeColor 3s infinite alternate;
            margin: 0 2px;
            z-index: 2;
        }

        @keyframes changeColor {
            0% { color: inherit; }
            33% { color: #ffd93d; }   /* 黄色 */
            67% { color: #4d96ff; }   /* 蓝色 */
            100% { color: #6bcb77; }  /* 绿色 */
        }


        p {
            font-size: 1rem;
            line-height: 1.5;
        }

        #particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
    #timerDiv {
            padding: 20px;
            color: #00b7ee;
            display: none; /* 初始时隐藏 */
    }
    #timerText{
           font-size: 30px;
    }

        @media (max-width: 600px) {
            h1 {
                font-size: 2rem;
            }
        }
    </style>

    <div id="particles"></div>
    <div class="container1">
        <h1 id="title">
            <span class="letter" style="color: #ff6b6b; animation-delay: 0s;">招</span>
            <span class="letter" style="color: #ffd93d; animation-delay: 0.15s;">聘</span>
            <span class="letter" style="color: #4d96ff; animation-delay: 0.3s;">岗</span>
            <span class="letter" style="color: #6bcb77; animation-delay: 0.4s;">位</span>
            <span class="letter" style="color: #ff8c00; animation-delay: 0.5s;">实</span>
            <span class="letter" style="color: #8e44ad; animation-delay: 0.6s;">时</span>
            <span class="letter" style="color: #ff8c00; animation-delay: 0.7s;">查</span>
            <span class="letter" style="color: #8e44ad; animation-delay: 0.8s;">询</span>
            <span class="letter" style="color: #ff8c00; animation-delay: 0.9s;">系</span>
            <span class="letter" style="color: #8e44ad; animation-delay: 1s;">统</span>
        </h1>
    <div id="sousuo"style="text-align: center ; padding: 5px">
			<form method="get" action="/search">
				<div class="form">
					<p>岗位名称</p>
					<input class="form-name"placeholder="java,python,php" name="kw" type="text" autofocus>
				</div><br>
				<div class="form" style="margin-top: 30px;">
					<p>搜索的省份、自治区、直辖市、港澳台</p>
					<input class="form-name"placeholder="例如:全国,广东,香港,内蒙古" name="city" type="text" autofocus>
				</div><br>
				<button type="submit" class="btn" id="search_btn">搜索</button>
			</form>
         <div id="timerDiv">
        <p id="timerText">正在获取处理数据<br>请耐心等待~<br>您已等待 <span id="secondsCount">0</span> 秒。</p>
        <img id="loading" src="https://i.gifer.com/VAy5.gif" alt="Loading Animation" height="50" /> <!-- 加载动画图片 -->
    </div>
    </div>

    </div>

    <script>
        let seconds = 0; // 秒数计数器
        let timer; // 定时器ID
        const searchButton = document.getElementById('search_btn'); // 获取按钮
        const timerDiv = document.getElementById('timerDiv'); // 获取DIV
        const secondsCount = document.getElementById('secondsCount'); // 获取秒数显示的span
        searchButton.addEventListener('click', function() {
            // 显示计时器DIV
            timerDiv.style.display = 'block';
            // 每秒更新计数
            if (!timer) { // 如果计时器未启动
                timer = setInterval(function() {
                    seconds++; // 秒数增加
                    secondsCount.textContent = seconds; // 更新文本内容
                }, 1000);
            }
        });

        const particlesContainer = document.getElementById('particles');
        const particles = [];
        function createParticle() {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            const size = Math.random() * 5 + 2;
            const color = `hsl(${Math.random() * 360}, 100%, 70%)`;
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            particle.style.background = color;

            const startX = Math.random() * window.innerWidth;
            const startY = 0;
            particle.style.left = startX + 'px';
            particle.style.top = startY + 'px';

            particlesContainer.appendChild(particle);

            const particleData = {
                element: particle,
                x: startX,
                y: startY,
                vx: 0,
                vy: Math.random() * 0.5 + 0.2,
                size: size
            };

            particles.push(particleData);
        }

        function updateParticles() {
            particles.forEach((particleData, index) => {
                particleData.x += particleData.vx;
                particleData.y += particleData.vy;

                particleData.element.style.transform = `translate(${particleData.x}px, ${particleData.y}px)`;

                if (particleData.y > window.innerHeight) {
                    particlesContainer.removeChild(particleData.element);
                    particles.splice(index, 1);
                }
            });

            requestAnimationFrame(updateParticles);
        }
        setInterval(createParticle, 200);
        updateParticles();
    </script>

{% endblock %}
